<template>
  <div class="box" @click="toggle">
    <div
      v-for="(item, index) in stateTitle"
      :key="item"
      :class="{
        active: index == 0 && !isCheck,
        active: index == 1 && isCheck,
      }"
    >
      {{ item }}
    </div>
  </div>
</template>


<script>
export default {
  props: {
    isCheck: {
      type: Boolean,
      default: false,
    },
    stateTitle: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  methods: {
    toggle() {
      this.$emit("changeIscheck", !this.isCheck);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 63rpx;
  background: #fa4047;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  padding: 0 4rpx;
  box-sizing: border-box;
  div {
    padding: 10rpx 30rpx;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 28rpx;
  }
  .active {
    background: #ffffff;
    border-radius: 60rpx;
    color: #fb1821;
  }
}
</style>